html {
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
}
a {
    color:inherit;
    text-decoration:none
}
* {
    box-sizing:border-box
}
input {
    -webkit-appearance:none
}
body {
    margin:0;
    background-color:#fff
}
.icon {
    width:1em;
    height:1em;
    vertical-align:-0.15em;
    fill:currentColor;
    overflow:hidden
}
@media (max-width: 568px) {
    .-hidden-mobile {
        display:none !important
    }
}
.-show-mobile {
    display:none
}
@media (max-width: 568px) {
    .-show-mobile {
        display:block
    }
}
.slogan-title .typed-cursor {
    color:#1FC3CB
}
.slogan-description .typed-cursor {
    color:#1FC3CB
}
.ss-header {
    background-color:#fff;
    box-shadow:0 0 12px 0 rgba(188, 193, 204, 0.3)
}
.ss-header .navbar {
    max-width:1200px;
    height:64px;
    padding:24px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.ss-header .logo {
    display:inline-block;
    height:32px;
    margin-right:100px
}
.ss-header .logo-link {
    font-size:0
}
.ss-header .navbar-brand {
    display:flex;
    align-items:center
}
@media (max-width: 568px) {
    .ss-header .navbar-brand {
        width:100%;
        justify-content:space-between
    }
}
.ss-header .navbar-menu {
    flex-grow:1;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.ss-header .navbar-start .navbar-item {
    margin-right:40px
}
.ss-header .navbar-start .navbar-item.-active {
    color:#1FC3CB
}
.ss-header .navbar-item {
    color:rgba(0, 0, 0, 0.65)
}
.ss-header .navbar-item:hover {
    color:#1FC3CB
}
.ss-header .navbar-end {
    display:flex;
    align-items:center
}
.ss-header .navbar-end .navbar-search {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:16px;
    padding:4px 16px;
    width:200px;
    height:32px;
    border:2px solid #1FC3CB;
    border-radius:16px;
    color:#bababa
}
.ss-header .navbar-end .input {
    outline:none;
    border:none;
    font-size:12px
}
.ss-header .navbar-end .icon {
    cursor:pointer
}
.ss-header .translation {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:32px;
    height:32px;
    border:1px solid rgba(0, 0, 0, 0.65);
    border-radius:50%
}
.ss-title {
    text-align:center;
    color:#000;
    font-size:38px;
    font-weight:500;
    margin-top:40px;
    margin-bottom:36px
}
#mobile-menu {
    position:fixed;
    top:0;
    bottom:0;
    width:300px;
    right:-320px;
    transform:translate(0px, 0px);
    transition:.5s ease;
    background-color:#fff;
    box-shadow:0 2px 16px 0 rgba(0, 0, 0, 0.5);
    z-index:205
}
#mobile-menu.-active {
    transform:translate(-320px, 0px)
}
#mobile-menu>a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    height:54px;
    padding:0 16px;
    font-size:16px;
    color:#000;
    border-bottom:1px solid #EDEDED
}
#mobile-menu>a.-active {
    color:#1FC3CB;
    background-color:#f0f8ff
}
#mobile-menu-icon {
    display:block;
    font-size:25px;
    cursor:pointer
}
.ss-footer {
    background-color:#010a13 !important;
    border-top:1.5px solid #1FC3CB
}
.ss-footer .container {
    max-width:1200px;
    margin:0 auto;
    padding:32px 24px;
    padding-bottom:16px;
    display:flex;
    justify-content:space-between
}
@media (max-width: 568px) {
    .ss-footer .container {
        flex-direction:column
    }
}
.ss-footer .links {
    display:flex;
    flex-wrap:wrap
}
@media (max-width: 568px) {
    .ss-footer .links {
        width:100%;
        align-self:flex-start;
        flex-direction:column
    }
}
.ss-footer .links>.cate {
    margin-right:70px
}
@media (max-width: 568px) {
    .ss-footer .links>.cate {
        width:100%;
        margin-right:0;
        margin-bottom:12px
    }
}
.ss-footer .cate-title {
    color:#fff;
    font-size:16px;
    font-weight:bold;
    margin:12px 0
}
.ss-footer .link {
    display:block;
    margin-right:24px;
    margin-bottom:10px;
    color:#b9b9b9;
    font-size:14px
}
@media (max-width: 568px) {
    .ss-footer .link {
        display:inline-block
    }
}
.ss-footer .qrcode {
    display:flex;
    justify-content:flex-end;
    align-items:flex-start
}
@media (max-width: 568px) {
    .ss-footer .qrcode {
        align-self:flex-start;
        margin-top:16px
    }
}
.ss-footer .qrcode>div {
    margin-right:40px;
    width:150px
}
@media (max-width: 568px) {
    .ss-footer .qrcode>div {
        width:120px;
        margin-right:16px
    }
}
.ss-footer .qrcode>div:last-child {
    margin-right:0
}
.ss-footer .qrcode .qrcode-img {
    width:100%
}
.ss-footer .qrcode .qrcode-desc {
    margin:0;
    margin-top:8px;
    text-align:center;
    font-size:14px;
    color:#b9b9b9
}
.ss-footer .copyright {
    padding:12px;
    border-top:1px solid #4f5c6d
}
.ss-footer .copyright>p {
    margin:12px;
    text-align:center;
    font-size:12px;
    color:#b9b9b9
}
.ss-footer .copyright>span {
    margin:12px;
    text-align:center;
    font-size:12px;
    color:#b9b9b9
}
.ss-pagination {
    margin-top:24px auto;
    padding-top:20px;
    border-top:1px solid #e8e8e8
}
.ss-pagination .list {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:center
}
.ss-pagination .item {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:2em;
    height:2em;
    margin:.25em;
    color:rgba(0, 0, 0, 0.65);
    cursor:pointer
}
.ss-pagination .item.-active {
    color:#fff;
    background-color:#1FC3CB;
    border-radius:50%
}
.ss-pagination-next {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin:24px 0;
    padding:20px 0;
    border-top:1px solid #e8e8e8
}
@media (max-width: 568px) {
    .ss-pagination-next {
        border-bottom:1px solid #e8e8e8
    }
}
.ss-pagination-next .link-prev, .ss-pagination-next .link-next {
    cursor:pointer
}
@media (max-width: 568px) {
    .ss-pagination-next .link-prev {
        margin-bottom:12px
    }
}
.ss-pagination-next .text {
    font-size:14px
}
.ss-aside {
    cursor:pointer;
    bottom:20px;
    right:15px;
    position:fixed;
    width:44px;
    height:44px;
    box-shadow:0 6px 12px 0 rgba(0, 0, 0, 0.15);
    z-index:999;
    background:#fff
}
.ss-aside img {
    width:100%
}
.ss-meta .container {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.ss-meta .edit-button {
    display:inline-block;
    width:80px;
    height:34px;
    line-height:34px;
    text-align:center;
    color:rgba(0, 0, 0, 0.65);
    background-color:#fff;
    border:1px solid #d9d9d9;
    border-radius:4px;
    cursor:pointer
}
.ss-meta .title {
    margin:0;
    padding:0;
    font-size:30px;
    color: #00316f
}
.ss-meta .meta {
    margin:24px 0 36px;
    color:rgba(0, 0, 0, 0.65)
}
.ss-meta .tags {
    color:#bfbfbf
}
.ss-meta .tag {
    margin-right:8px
}
.ss-meta .tag:hover {
    color:#1FC3CB;
    background-color:#E0EEEE 
}
.ss-meta .meta i:last-child {
    font-style: italic
}
.ss-summary {
    padding:24px 0;
    border-bottom:1px solid #e8e8e8;
    display:flex;
    align-items:flex-start;
    width:100%
}
.ss-summary:last-of-type {
    border:none
}
.ss-summary .cover {
    width:200px;
    max-width:100%;
    margin-right:24px
}
@media (max-width: 568px) {
    .ss-summary .cover {
        width:110px;
        margin-right:12px
    }
}
.ss-summary .container {
    flex:1;
    overflow:hidden
}
.ss-summary .title {
    margin:0;
    margin-bottom:8px;
    font-size:20px;
    color:#153f75 
}
.ss-summary .title:hover {
    color:#00CCFF
}

@media (max-width: 568px) {
    .ss-summary .title {
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden
    }
}
.ss-summary .meta {
    font-size:12px;
    color:rgba(0, 0, 0, 0.65)
}
.ss-summary .summary {
    margin:12px 0;
    font-size:14px;
    color:#000;
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical
}
.ss-summary .tags {
    font-size:12px;
    color:rgba(0, 0, 0, 0.65)
}
.ss-summary .tag {
    margin-right:14px
}
.typo {
    position:relative;
    width:100%;
    max-width:1000px;
    margin:0 auto;
    height:auto;
    word-wrap:break-word;
    color:#262626;
    font-size:14px;
    line-height:24px;
    letter-spacing:0.05em
}
.typo>*:first-child {
    margin-top:0 !important
}
.typo a, .typo a:active {
    word-wrap:break-word;
    color:#1fc3cb
}
.typo a:hover {
    color:#1890FF
}
.typo a:not([href]) {
    color:inherit;
    text-decoration:none
}
.typo b, .typo strong {
    font-weight:bold
}
.typo span strong {
    color:inherit
}
.typo del, .typo del * {
    text-decoration:line-through
}
.typo mark {
    background-color:yellow;
    padding:0
}
.typo input {
    margin:0
}
.typo html input[disabled] {
    cursor:default
}
.typo input[type="checkbox"] {
    box-sizing:border-box;
    padding:0
}
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6 {
    word-spacing:1px;
    font-weight:bold
}
.typo h1 {
    font-size:28px;
    line-height:50px
}
.typo h2 {
    font-size:24px;
    line-height:46px
}
.typo h3 {
    font-size:20px;
    line-height:42px
}
.typo h4 {
    font-size:16px;
    line-height:38px
}
.typo h5 {
    font-size:14px;
    line-height:36px
}
.typo h6 {
    font-weight:normal;
    font-size:14px;
    line-height:24px
}
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, .typo blockquote, .typo ul, .typo ol, .typo dl, .typo table, .typo pre, .typo hr, .typo p {
    position:relative;
    margin-top:24px;
    margin-bottom:24px
}
.typo ol, .typo ul {
    padding-left:2em
}
.typo ul ul, .typo ul ol, .typo ol ol, .typo ol ul {
    margin-top:0;
    margin-bottom:0
}
.typo ul {
    list-style-type:disc
}
.typo ul ul {
    list-style-type:circle
}
.typo ul ul ul {
    list-style-type:square
}
.typo ul ul ol {
    list-style-type:lower-alpha
}
.typo ul ol {
    list-style-type:lower-roman
}
.typo ul ol ul {
    list-style-type:square
}
.typo ul ol ol {
    list-style-type:lower-alpha
}
.typo ol {
    list-style-type:decimal
}
.typo ol ol {
    list-style-type:lower-roman
}
.typo ol ol ul {
    list-style-type:square
}
.typo ol ol ol {
    list-style-type:lower-alpha
}
.typo ol ul {
    list-style-type:circle
}
.typo ol ul ul {
    list-style-type:square
}
.typo ol ul ol {
    list-style-type:lower-alpha
}
.typo li>p {
    margin-top:0;
    margin-bottom:0
}
.typo hr {
    position:relative;
    height:2px;
    padding:0;
    background-color:#e8e8e8;
    border:none;
    margin-right:0;
    margin-left:0
}
.typo blockquote {
    margin:0;
    padding:0 0 0 1em;
    color:#8C8C8C;
    border-left:3px solid #e8e8e8
}
.typo blockquote:first-child {
    margin-top:0
}
.typo blockquote:last-child {
    margin-bottom:0
}
.typo code {
    position:relative;
    top:-1px;
    display:inline-block;
    font-family:Consolas, Menlo, Courier, monospace;
    line-height:18px;
    font-size:13px;
    padding:0 4px;
    margin:0 1px;
    vertical-align:middle;
    background:#f5f5f5;
    border-radius:2px;
    border:1px solid #e8e8e8;
    word-wrap:break-word;
    word-break:break-all;
    hyphens:none;
    text-indent:0
}
.typo kbd {
    position:relative;
    top:-1px;
    display:inline-block;
    font-family:Consolas, Menlo, Courier, monospace;
    line-height:18px;
    font-size:13px;
    padding:0 4px;
    margin:0 1px;
    border:1px solid #e8e8e8;
    border-bottom-color:#bbb;
    border-radius:3px 3px;
    box-shadow:inset 0 -1px 0 #bbb
}
.typo pre {
    font-family:Consolas, Menlo, Courier, monospace;
    line-height:21px;
    font-size:13px;
    overflow:auto;
    tab-size:4;
    margin:5px 0;
    color:#595959;
    background:#fafafa;
    border-radius:2px 2px;
    border:1px solid #e8e8e8;
    padding:16px 16px
}
.typo pre code {
    border:none;
    background:none;
    top:0;
    margin:0;
    font-size:inherit;
    line-height:inherit
}
.typo pre code:before, .typo pre code:after {
    content:normal
}
.typo video {
    display:block;
    max-width:100%;
    margin-top:24px;
    margin-bottom:24px
}
.typo img {
    border:none;
    max-width:100%;
    box-sizing:content-box;
    background-color:#fff;
    cursor:zoom-in
}
.typo figure {
    position:relative
}
.typo figcaption {
    position:relative;
    width:100%;
    text-align:center;
    left:0;
    margin-top:0px;
    font-weight:400;
    font-size:12px;
    color:#8C8C8C
}
.typo table {
    table-layout:fixed;
    position:relative;
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    word-break:normal;
    word-break:keep-all;
    overflow:auto;
    white-space:normal
}
.typo table tr {
    background:#ffffff;
    border-top:1px solid #e8e8e8
}
.typo table tr:nth-child(2n+1) {
    background-color:#fafafa
}
.typo table thead tr:nth-child(2n+1) {
    background-color:#f5f5f5
}
.typo table td, .typo table th {
    padding:6px 8px;
    border:1px solid #e8e8e8;
    white-space:normal;
    word-wrap:break-word;
    word-break:break-all
}
.typo table p {
    margin-top:0;
    margin-bottom:0
}
.hljs-comment, .hljs-quote {
    color:#8e908c
}
.hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-deletion {
    color:#c82829
}
.hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params, .hljs-meta, .hljs-link {
    color:#f5871f
}
.hljs-attribute {
    color:#eab700
}
.hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition {
    color:#718c00
}
.hljs-title, .hljs-section {
    color:#4271ae
}
.hljs-keyword, .hljs-selector-tag {
    color:#8959a8
}
.hljs {
    display:block;
    overflow-x:auto;
    background:white;
    color:#4d4d4c;
    padding:0.5em
}
.hljs-emphasis {
    font-style:italic
}
.hljs-strong {
    font-weight:bold
}
.ss-aside-tags .tag-list {
    display:flex;
    flex-wrap:wrap;
    margin:0;
    padding:0;
    list-style:none
}
.ss-aside-tags .tag {
    font-size:12px;
    color:#878787;
    background-color:rgba(224, 231, 239, 0.5);
    padding:5px 8px;
    margin:0 8px 6px 0;
    border-radius:4px
}
.ss-aside-tags .tag:hover {
    color:#1FC3CB;
    background-color:#E0EEEE 
}
.ss-aside-related {
    display:flex;
    flex-direction:column;
    margin:0;
    padding:0;
    list-style:none
}
.ss-aside-related>li {
    margin-bottom:14px;
    font-size:14px;
    color:rgba(0, 0, 0, 0.65)
}
.ss-aside-related>li:hover {
    color:#1FC3CB
}
.ss-aside-related>li:last-child {
    margin-bottom:0
}
.ss-aside-code {
    max-width:300px
}
.ss-aside-code .button {
    display:inline-block;
    color:#000;
    background-color:#F4F4F4;
    border:1px solid #d9d9d9;
    border-radius:4px;
    outline:none;
    font-size:14px;
    text-align:center;
    padding:0 12px;
    height:32px;
    line-height:32px;
    cursor:pointer
}
.ss-aside-code .button.download {
    width:100%;
    height:36px;
    line-height:36px;
    border:none;
    color:#fff;
    background-color:#1FC3CB
}
.ss-aside-code .button.-selected {
    color:#1FC3CB;
    background-color:#f0f8ff;
    border-color:#1FC3CB
}
.ss-aside-code .input-group {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.ss-aside-code .input-group .input {
    border:1px solid #d9d9d9;
    border-radius:4px 0 0 4px;
    outline:none;
    font-size:14px;
    flex-grow:1;
    margin:16px 0;
    padding:0 12px;
    height:32px
}
.ss-aside-code .input-group .addon {
    display:flex;
    justify-content:center;
    align-items:center;
    width:32px;
    height:32px;
    border:1px solid #d9d9d9;
    border-left:none;
    border-radius:0 4px 4px 0;
    cursor:pointer
}
.ss-aside-code .input-group .addon .copy {
    display:block
}
.ss-aside-code .input-group .addon .tick {
    display:none
}
.ss-aside-code .input-group .addon.-copyed .copy {
    display:none
}
.ss-aside-code .input-group .addon.-copyed .tick {
    display:block
}
.ss-aside-code .input-group .icon {
    width:20px;
    font-size:14px;
    color:#8c8c8c
}
.ss-aside-code .button-group {
    display:flex
}
.ss-aside-code .button-group .button {
    width:100%;
    border-radius:0
}
.ss-aside-code .button-group .button:first-child {
    position:relative;
    border-radius:4px 0 0 4px
}
.ss-aside-code .button-group .button:last-child {
    position:relative;
    left:-1px;
    border-radius:0 4px 4px 0
}
.ss-aside-code .button-group .-selected {
    z-index:10
}
.ss-aside-project .link {
    display:block;
    margin-bottom:12px;
    font-size:14px;
    color:#1FC3CB;
    cursor:pointer
}
.ss-aside-toc #TableOfContents>ul, .ss-aside-toc #TableOfContents>ul>li>ul {
    margin:0
}
.ss-aside-toc ul {
    list-style:none;
    padding:0;
    margin:0;
    margin-left:8px
}
.ss-aside-toc a {
    display:inline-block;
    width:100%;
    margin-bottom:8px;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
@media (max-width: 568px) {
    .ss-toc {
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        width:260px;
        background-color:#fff;
        z-index:205;
        transform:translateX(-100%);
        transition:0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) 0s
    }
    .ss-toc.-show {
        display:block;
        transform:translateX(0);
        box-shadow:2px 0 8px rgba(0, 0, 0, 0.15)
    }
}
.ss-toc .drawer-body {
    width:100%;
    height:100%;
    overflow-x:hidden
}
@media (max-width: 568px) {
    .ss-toc .drawer-body {
        padding:24px 16px 0 16px
    }
}
.ss-toc .drawer-handle {
    display:none;
    position:absolute;
    top:80px;
    right:-30px;
    width:30px;
    height:30px;
    justify-content:center;
    align-items:center;
    background-color:#fff;
    box-shadow:0px 5px 5px -5px rgba(0, 0, 0, 0.15), 5px 0px 5px -5px rgba(0, 0, 0, 0.15);
    border-radius:0 4px 4px 0;
    z-index:206
}
@media (max-width: 568px) {
    .ss-toc .drawer-handle {
        display:flex
    }
}
.ss-toc .drawer-handle .icon-menu {
    display:block
}
.ss-toc .drawer-handle .icon-close {
    display:none
}
.ss-toc .drawer-handle.-show .icon-menu {
    display:none
}
.ss-toc .drawer-handle.-show .icon-close {
    display:block
}
.ss-toc .headers {
    font-size:20px;
    font-weight:bold;
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.ss-toc .headers .ss-project_list_card {
    margin-left:12px
}
.ss-toc .body ul {
    margin:0;
    padding:0;
    list-style:none;
    margin-left:16px
}
.ss-toc .body>ul {
    margin-left:0
}
.ss-toc .body .item .leaf-section {
    display:none
}
.ss-toc .body .item .arrow {
    transform:scale(0.7) rotate(-90deg);
    transition:transform .4s
}
.ss-toc .body .item.-show>.link>.arrow {
    transform:scale(0.7) rotate(0)
}
.ss-toc .body .item.-show>.leaf-section {
    display:block
}
.ss-toc .body .link {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    cursor:pointer
}
.ss-toc .body .link a {
    display:block;
    flex-grow:1;
    padding:12px
}
.ss-toc .body .link .arrow {
    display:block;
    flex-grow:0
}
.ss-toc .body .link:hover {
    color:#1FC3CB
}
.ss-toc .body .-current {
    background-color:#1FC3CB;
    color:#F4F4F4
}
.ss-toc .body .-current.link:hover {
    color:#F4F4F4
}
.ss-toc-list-card {
    position:relative
}
.ss-toc-list-card .icon {
    cursor:pointer
}
.ss-tooltip {
    display:none;
    padding:16px 24px;
    background:#fff;
    box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius:2px
}
.ss-tooltip.-active {
    display:block;
    position:absolute
}
.ss-tooltip .toc-list {
    min-width:130px;
    margin-bottom:24px
}
.ss-tooltip .toc-list:last-of-type {
    margin-bottom:0
}
.ss-tooltip .toc-list .title {
    margin:0;
    padding-bottom:8px;
    font-size:16px;
    border-bottom:1px solid #e8e8e8
}
.ss-tooltip .toc-list .list {
    margin:0;
    margin-top:8px;
    padding:0;
    list-style:none
}
.ss-tooltip .toc-list .item {
    margin-top:8px;
    font-size:14px;
    cursor:pointer
}
.ss-tooltip .toc-list .item:hover {
    color:#1FC3CB
}
#js-home-animition {
    position:relative;
    margin:auto;
    height:100vh;
    display:flex;
    justify-content:flex-end;
    z-index:100;
    max-width:1200px
}
@media (max-width: 568px) {
    #js-home-animition {
        justify-content:center
    }
}
#js-home-animition svg {
    overflow:visible
}
#js-home-animition #debris1 {
    position:absolute;
    right:400px
}
#js-home-animition #debris2 {
    position:absolute;
    top:200px;
    right:500px
}
#js-home-animition #debris3 {
    position:absolute;
    right:0px
}
.home-background {
    position:absolute;
    top:64px;
    width:100%;
    z-index:-3;
    overflow:hidden
}
.home-background.-no-max-width>img {
    max-width:100000px
}
.home-background>img {
    display:block;
    width:100%;
    max-width:1500px;
    min-width:470px;
    margin:0 auto;
    z-index:-2
}
.home-background .gradient {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    background:linear-gradient(rgba(51, 153, 235, 0.05), rgba(51, 153, 235, 0))
}
.home-container {
    margin:0 auto;
    margin-top:100px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    max-width:1200px;
    padding:0 24px
}
.home-description {
    margin:0;
    font-size:14px;
    line-height:22px;
    color:rgba(0, 0, 0, 0.65)
}
.home-button {
    display:inline-block;
    width:100px;
    height:40px;
    line-height:40px;
    color:#fff;
    background-color:#1FC3CB;
    border:none;
    outline:none;
    cursor:pointer;
    text-align:center
}
.home-button.-outline {
    color:#1FC3CB;
    background-color:rgba(0, 0, 0, 0);
    border:1px solid #1FC3CB;
    box-shadow:none
}
.home-button.-shadow {
    box-shadow:0 4px 16px 0 rgba(24, 144, 255, 0.3)
}
.slogan {
    margin:48px 0
}
.slogan .slogan-title {
    font-size:48px;
    font-weight:500;
    margin:12px 0
}
.slogan .slogan-title img {
    height: 60px;
    display: block;
    float: left;
}
@media (max-width: 568px) {
    .slogan .slogan-title {
        font-size:40px;
        text-align:center
    }
}
.slogan .slogan-description {
    width:50%;
    font-size:18px;
    color:rgba(0, 0, 0, 0.65)
}
@media (max-width: 568px) {
    .slogan .slogan-description {
        width:100%
    }
}
.slogan .button-groups {
    display:flex;
    margin:24px 0
}
@media (max-width: 568px) {
    .slogan .button-groups {
        width:100%;
        margin:24px auto
    }
}
.slogan .home-button {
    width:172px;
    height:56px;
    line-height:56px;
    font-size:20px;
    border-radius: 16px;
}
.slogan .home-button:last-child {
    margin-left:24px
}
.slogan .feature {
    margin-top:32px;
    display:flex;
    justify-content:space-between
}
@media (max-width: 568px) {
    .slogan .feature {
        flex-direction:column
    }
}

@media (max-width: 568px) {
    .slogan .feature-container {
        width:100%;
        padding:30px 24px
    }
}
.slogan .feature-container>img {
    height:100px
}
.slogan .feature-title {
    font-size:24px;
    font-weight:450;
    margin:24px 0
}
.charpter-description {
    margin:5vh 0
}
.charpter-description .container {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    margin:5vh 0;
    padding:32px 0
}
.charpter-description .description-container {
    width:48%
}
@media (max-width: 568px) {
    .charpter-description .description-container {
        width:100%
    }
}
.charpter-description .description-container .title {
    font-size:30px;
    margin:20px 0;
    font-weight:450
}
.charpter-description .description-container .home-description {
    line-height:28px;
    margin-bottom:20px
}
.charpter-description .img-container {
    width:48%;
    display:flex;
    justify-content:center;
    align-items:center
}
@media (max-width: 568px) {
    .charpter-description .img-container {
        width:100%;
        order:-1;
        margin-bottom:20px
    }
}
.charpter-description .img-container>img {
    max-width:100%
}
.subscription {
    background-color:#2b323a;
    padding:50px 0
}
.subscription h2 {
    margin:0 24px;
    text-align:center;
    color:#fff;
    font-size:24px;
    line-height:1.2
}
.subscription .email {
    margin-top:36px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center
}
.subscription .email>input {
    width:500px;
    height:40px;
    margin-right:8px;
    padding:2px 8px;
    border:none;
    border-radius:2px;
    outline:none
}
@media (max-width: 568px) {
    .subscription .email>input {
        margin:12px
    }
}
.subscription .email .home-button {
    border-radius:2px
}
.ss-back-legacy {
    position:fixed;
    right:0;
    bottom:20%;
    display:flex;
    justify-content:center;
    justify-items:center;
    width:24px;
    padding:8px 4px 6px 6px;
    border-radius:4px 0 0 4px;
    background-color:#f7f7f7
}
.ss-back-legacy .text {
    display:block;
    writing-mode:vertical-rl;
    text-align:center;
    font-size:14px;
    letter-spacing:4px;
    color:rgba(0, 0, 0, 0.65)
}
.ss-back-legacy .english {
    letter-spacing:0;
    text-orientation:mixed;
    transform:rotate(180deg)
}
.ss-search {
    width:700px;
    margin:0 auto
}
@media (max-width: 568px) {
    .ss-search {
        width:100%
    }
}
.ss-search .input-wrapper {
    margin:24px auto;
    height:56px;
    border:1px solid #1FC3CB;
    display:flex
}
@media (max-width: 568px) {
    .ss-search .input-wrapper {
        height:46px;
        font-size:16px
    }
}
.ss-search .search-icon {
    display:flex;
    justify-content:center;
    align-items:center;
    width:56px;
    font-size:25px;
    color:#1FC3CB;
    background-color:rgba(255, 255, 255, 0.3)
}
@media (max-width: 568px) {
    .ss-search .search-icon {
        width:42px;
        font-size:20px
    }
}
.ss-search .input {
    flex-grow:1;
    height:100%;
    border:0;
    outline:0;
    font-size:16px;
    background-color:rgba(255, 255, 255, 0.3)
}
.ss-search .button {
    display:flex;
    justify-content:center;
    align-items:center;
    width:90px;
    height:100%;
    color:#fff;
    background-color:#1FC3CB;
    cursor:pointer;
    font-size:16px
}
@media (max-width: 568px) {
    .ss-search .button {
        width:80px
    }
}
.ss-search .search-type {
    display:flex;
    flex-wrap:wrap;
    margin:40px 0
}
.ss-search .search-type .item {
    padding:8px 20px;
    margin-right:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:14px;
    color:rgba(0, 0, 0, 0.65);
    cursor:pointer
}
.ss-search .search-type .item:last-child {
    margin-right:0
}
.ss-search .search-type .item:hover, .ss-search .search-type .item.-selected {
    color:#1FC3CB
}
.ss-search .search-type input {
    display:none
}
.ss-search .search-container {
    display:flex;
    flex-direction:column
}
.ss-search .search-container .not-found {
    margin-top:40px;
    text-align:center;
    font-size:16px;
    color:rgba(0, 0, 0, 0.65)
}
.ss-search .search-container .ss-summary {
    flex-direction:column
}
.ss-search .search-container .ss-summary .title {
    max-width:100%
}
.ss-search .search-container .ss-summary a {
    text-overflow:ellipsis
}
.ais-Highlight {
    color:#006ad9
}
.ss-404 .home-background {
    height:500px
}

.container .tags .tag:hover {
    color:#1FC3CB;
    background-color:#E0EEEE 
}
.container-404 {
    position:relative;
    height:600px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}
.container-404>img {
    width:340px;
    margin-bottom:24px
}
.container-404 .text {
    color:rgba(0, 0, 0, 0.65);
    text-align:center;
    margin-bottom:24px
}
.ss-layout-container {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin:30px auto;
    width:100%;
    max-width:1200px;
    min-height:70vh
}
@media (max-width: 1024px) {
    .ss-layout-container {
        flex-direction:column;
        align-items:stretch
    }
}
.ss-layout-main {
    width:75%;
    padding:0 24px
}
@media (max-width: 1024px) {
    .ss-layout-main {
        width:100%
    }
}
.ss-layout-main.-noaside {
    width:100%
}
.ss-layout-main.-card {
    padding:24px
}
.ss-layout-aside {
    width:25%;
    min-width:20%;
}
@media (max-width: 1024px) {
    .ss-layout-aside {
        width:100%;
        margin-top:20px
    }
    .ss-layout-aside.-left {
        margin-top:0;
        margin-bottom:20px
    }
}
.ss-layout-aside .ss-card {
    margin:0 24px;
    padding:24px 0;
    border-bottom:1px solid #e8e8e8
}
.ss-layout-aside .ss-card:last-child {
    border-bottom:none
}
@media (max-width: 568px) {
    .ss-layout-aside.-soft-hidden {
        margin:0 !important;
        padding:0 !important;
        width:0 !important;
        height:0 !important;
        overflow:hidden !important
    }
}
.ss-card {
    padding:24px
}
.ss-card .card-title {
    margin:0;
    margin-bottom:16px;
    font-size:20px;
    color:#000;
    display:flex;
    justify-content:space-between;
    align-items:flex-end
}
.ss-card .card-title .card-extra {
    color:#1FC3CB;
    font-size:12px;
    cursor:pointer
}
.ss-card.-bg-opacity {
    background-color:rgba(255, 255, 255, 0.7);
    border:1px solid #e8e8e8
}
.ss-list .list-title {
    font-size:30px;
    font-weight:450;
    color:#000
}
.ss-list .list {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start
}
@media (max-width: 568px) {
    .ss-list .list {
        flex-direction:column
    }
}
.ss-list .ss-project-card, .ss-list .ss-guide-card {
    width:31%;
    margin-bottom:24px;
    margin-right:24px
}
.ss-list .ss-project-card:nth-child(3n), .ss-list .ss-guide-card:nth-child(3n) {
    margin-right:0
}
@media (max-width: 1024px) {
    .ss-list .ss-project-card, .ss-list .ss-guide-card {
        width:46%
    }
    .ss-list .ss-project-card:nth-child(2n), .ss-list .ss-guide-card:nth-child(2n) {
        margin-right:0
    }
    .ss-list .ss-project-card:nth-child(3n), .ss-list .ss-guide-card:nth-child(3n) {
        margin-right:24px
    }
}
@media (max-width: 568px) {
    .ss-list .ss-project-card, .ss-list .ss-guide-card {
        width:100%;
        margin:0;
        margin-bottom:16px
    }
}
.ss-project-card {
    min-height:140px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}
@media (max-width: 568px) {
    .ss-project-card {
        margin-left:16px
    }
}
.ss-project-card .header {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.ss-project-card .header>.header-first {
    flex-grow:1;
    display:flex;
    align-items:center
}
.ss-project-card .project-icon {
    width:32px;
    margin-right:16px
}
.ss-project-card .card-title {
    margin:0;
    font-size:20px;
    font-weight:450;
    color:#000
}
.ss-project-card .gitstar {
    margin-left:16px
}
.ss-project-card .card-content {
    margin:0;
    margin-top:8px;
    font-size:14px;
    color:rgba(0, 0, 0, 0.65)
}
.ss-guide-card {
    min-height:140px
}
.ss-guide-card .card-title {
    margin:0;
    font-size:16px;
    color:#1FC3CB;
    cursor:pointer
}
.ss-guide-card .card-content {
    margin:0;
    margin-top:8px;
    font-size:14px
}
.js-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.5);
    visibility:hidden;
    color:white;
    text-align:center;
    z-index:200;
    opacity:0;
    transition:opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)
}
.js-overlay.-show {
    visibility:visible;
    opacity:1
}
.-noscroll {
    position:fixed;
    left:0;
    right:0;
    overflow-y:hidden
}
#mobile-menu .navbar-search-mobile {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 16px;
     width: 100%;
     height: 60px;
     color: rgba(0, 0, 0, 0.65);
     background-color: #1FC3CB;
     border-bottom: 1px solid #EDEDED;
 }
#mobile-menu .navbar-search-mobile .input2 {
    width: 93%;
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    outline: none;
    border: none;
    border-radius: 4px;
}
